Chrome Extension 入门

JavaSccript Chrome, JavaSccript 评论

前言

2020年了，新年第一篇小文章！祝大家新年快乐～一直觉得浏览器是个很神秘的东西，天天在用，自以为很熟悉，也在用一些插件，有些还挺好用。所以自己也想写一个小小的插件，满足一下自己的好奇心！暂且翻译一下Chrome的插件开发的官网文档吧

原文链接

开始

扩展(Extension)由不同的但相互联系的组件构成。 组件可以包括后台脚本，内容脚本，选项页，UI元素和各种逻辑文件。 扩展组件是使用Web开发技术创建的：HTML，CSS和JavaScript。 扩展的组件将取决于其功能，并且可能不需要所有选项。

本教程将构建一个扩展，允许用户更改 developer.chrome.com 网页上任何页面的背景颜色。 我们将使用许多核心组件来介绍它们之间的关系。

首先，创建一个新目录来保存扩展文件。

1
$ mkdir colorchange_extension && cd colorchange_extension

完整的扩展程序可以在此处下载。

创建 manifest 文件

扩展从清单文件开始。 创建一个名为 manifest.json 的文件并包含以下代码，或在此处下载该文件。

1
2
3
4
5
6
{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "manifest_version": 2
}

在当前状态下在开发人员模式将包含清单文件的目录添加到Chrome扩展程序中。

  1. Chrome浏览器地址中输入 chrome://extensions，打开“扩展管理”页面。
    • 也可以通过单击Chrome菜单，将鼠标悬停在“更多工具”上，然后选择“扩展程序”来打开“扩展程序管理”页面。
  2. 通过单击开发人员模式旁边的切换开关启用开发人员模式。
  3. 单击LOAD UNPACKED按钮，然后选择扩展目录。

哇😯！Amazing！该扩展程序已成功安装。 由于清单中未包含任何图标，因此将为扩展程序创建通用工具栏图标。

添加说明

尽管已安装扩展程序，但没有说明。 通过创建名为background.js的文件或在此处下载该文件并将其放置在扩展目录中，来引入背景脚本。

后台脚本和许多其他重要组件必须在清单中注册。 在清单中注册后台脚本会告诉扩展名要引用哪个文件，以及该文件的行为。

1
2
3
4
5
6
7
8
9
10
{
   "name": "Getting Started Example",
   "version": "1.0",
   "description": "Build an Extension!",
   "background": {                     // new
     "scripts": ["background.js"],     // new
     "persistent": false               // new
   },
   "manifest_version": 2
}

现在，该扩展程序知道它包含一个非持久性后台脚本，并将扫描已注册文件中需要侦听的重要事件。

此扩展在安装后将需要来自持久变量的信息。首先在后台脚本中包含一个 runtime.onInstalled 的侦听事件。 在 onInstalled 侦听器内部，扩展将使用 storage API 设置一个值。 这将允许多个扩展组件访问该值并进行更新。

1
2
3
4
5
chrome.runtime.onInstalled.addListener(function() {
   chrome.storage.sync.set({color: '#3aa757'}, function() {
     console.log("The color is green.");
   });
 });

大多数API（包括 storage API）都必须在清单的 "permissions" 字段下注册，扩展才能有权限使用。

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

浏览回到扩展管理页面，然后单击重新加载按钮。 带有蓝色链接（背景页面）的新字段“检查视图”可用。

单击链接以查看背景脚本控制台日志，

1
The color is green.

介绍用户界面

扩展可以具有多种形式的用户界面，但是这种形式将使用弹出窗口。 创建一个名为 popup.html 的文件并将其添加到该目录，或在此处下载。 此扩展程序使用按钮来更改背景颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

与后台脚本一样，需要在 page_action 下的清单中将此文件指定为弹出窗口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
   "name": "Getting Started Example",
   "version": "1.0",
   "description": "Build an Extension!",
   "permissions": ["storage"],
   "background": {
     "scripts": ["background.js"],
     "persistent": false
   },
   "page_action": {
     "default_popup": "popup.html"
   },
   "manifest_version": 2
 }

工具栏图标的名称也包含在 default_icons 字段的 page_action 下。 在此处下载 images 文件夹，将其解压缩，并将其放置在扩展程序的目录中。更新清单文件，以便扩展程序知道如何使用图像。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["storage"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "manifest_version": 2
  }

扩展程序还会在扩展程序管理页面上显示图像，权限警告和网站图标。 这些图像在清单中的图标下方指定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}

如果在此阶段重新加载扩展，它将包含一个灰度图标，但不会包含任何功能差异。 由于 page_action 是在清单中声明的，因此由扩展程序决定是否告诉浏览器用户何时可以与 popup.html 进行交互。

在 runtime.onInstalled 侦听器事件中，使用 declarativeContent API将声明的规则添加到后台脚本中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })
      ],
          actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

该扩展将需要权限才能访问其清单中的 declarativeContent API。

1
2
3
4
5
6
{
   "name": "Getting Started Example",
 ...
   "permissions": ["declarativeContent", "storage"],
 ...
 }

现在，当用户导航到包含“ developer.chrome.com”的URL时，浏览器将在浏览器工具栏中显示一个全彩页面操作图标。 图标为全色时，用户可以单击它以查看popup.html。

弹出式UI的最后一步是为按钮添加颜色。 使用以下代码创建一个名为popup.js的文件并将其添加到扩展目录，或在此处下载。

1
2
3
4
5
6
let changeColor = document.getElementById('changeColor');

chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});

此代码从 popup.html 获取按钮，并从存储中请求颜色值。 然后，它将颜色用作按钮的背景。 在popup.html 中将脚本标记包含到 popup.js 中。

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
...
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

重新加载扩展以查看绿色按钮。

层逻辑

现在，该扩展程序知道在 developer.chrome.com 上用户应该可以使用该弹出窗口，并显示一个彩色按钮，但是需要逻辑来进行进一步的用户交互。 更新popup.js以包含以下代码。

1
2
3
4
5
6
7
8
9
10
let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
  let color = element.target.value;
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'document.body.style.backgroundColor = "' + color + '";'});
  });
};

更新的代码在按钮上添加了onclick事件，该事件触发以编程方式插入的内容脚本。 这会将页面的背景色变成与按钮相同的颜色。 使用程序注入可以允许用户调用内容脚本，而不是将不需要的代码自动插入到网页中。

清单将需要activeTab权限，以允许扩展程序临时访问tabs API。 这使扩展程序可以调用tabs.executeScript。

1
2
3
4
5
6
{
   "name": "Getting Started Example",
 ...
   "permissions": ["activeTab", "declarativeContent", "storage"],
 ...
 }

该扩展程序现在可以正常使用了！ 重新加载扩展程序，刷新此页面，打开弹出窗口，然后单击按钮将其变为绿色！ 但是，某些用户可能希望将背景更改为其他颜色。

用户选项

该扩展程序当前仅允许用户将背景更改为绿色。 包括一个选项页面使用户可以更好地控制扩展功能，从而进一步自定义其浏览体验。

首先在目录中创建一个名为options.html的文件，并包含以下代码，或在此处下载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
  <html>
    <head>
      <style>
        button {
          height: 30px;
          width: 30px;
          outline: none;
          margin: 10px;
        }
      </style>
    </head>
    <body>
      <div id="buttonDiv">
      </div>
      <div>
        <p>Choose a different background color!</p>
      </div>
    </body>
    <script src="options.js"></script>
  </html>

然后在清单中注册选项页面

1
2
3
4
5
6
7
{
    "name": "Getting Started Example",
    ...
    "options_page": "options.html",
    ...
    "manifest_version": 2
  }

重新加载扩展，然后单击详细信息。

向下滚动详细信息页面，然后选择扩展选项以查看选项页面，尽管该页面当前将显示为空白。

提供了四个颜色选项，然后使用 onclick 事件侦听器将它们生成为选项页面上的按钮。 用户单击按钮时，它将更新扩展程序全局存储中的颜色值。 由于所有扩展文件都从全局存储中提取颜色信息，因此无需更新其他值。

下一步

恭喜你！ 该目录现在包含一个功能齐全的Chrome扩展程序，尽管它很简单。

下一步是什么？

  • “ Chrome扩展程序概述”进行了一些备份，并在总体上填写了有关扩展程序架构的许多详细信息，以及开发人员希望熟悉的一些特定概念。

  • 在调试教程中了解可用于调试扩展的选项。

  • Chrome扩展程序可以访问功能强大的API，而这些API均超出开放网络所提供的范围。 chrome。* API文档将介绍每个API。

  • 开发人员指南还有许多其他链接，这些链接指向与高级扩展创建相关的文档。

根据CC-By 3.0许可提供的内容

爨美团点评 Android 开发

一只会 FE 的 Android 工程师～